<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My Featured Properties</title>
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            -webkit-overflow-scrolling: touch; 
        </style>
        <style>
            .myButton3 {
                background-color:#44c767;
                -moz-border-radius:28px;
                -webkit-border-radius:28px;
                border-radius:28px;
                border:1px solid #44c767;
                display:inline-block;
                cursor:pointer;
                color:#ffffff;
                font-family: tahoma, avant, arial;
                font-size:17px;
                padding:8px 53px;
                text-decoration:none;
                text-shadow:0px 1px 0px #44c767;
            }
            .myButton3:hover {
                background-color:#44c767;
                color:#ffffff;
            }
            .myButton3:active {
                position:relative;
                top:1px;
                color:#ffffff;
            }
            .myButton3:visited {
                color:#ffffff;
            }
        </style>
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/token/jquery.tokeninput.js"></script>   
        <script type="text/javascript" src="${model.props.appPath}/js/block/jquery.blockUI.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#table-listings tr:even").css("background-color", "#f3f3f3");
            });
        </script>
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
        <script type="text/javascript">
            function submit() {
                if (!$('#agree').is(":checked")) {
                    alert("Please check the checkbox to indicate that you agree to our terms & conditions.");
                    return;
                }

                var city = $("#listing-city").val();
                var term = $("#listing-term").val();

                try {
                    $.blockUI({message: "<div style='font-family: avant, Century Gothic, Calibri, Verdana; padding: 10px;'>Processing request ...</div>"});

                    $.ajax({
                        type: 'POST',
                        url: "${model.props.appPath}/ws/featured.htm",
                        data: {
                            city: city,
                            term: term,
                            listingID: "${model.listing.id}",
                            a: 29
                        },
                        timeout: 200000,
                        success: function(data) {
                            $.unblockUI();
                            if (data.model.success) {
                                $("#dialog").dialog("close");
                                alert("Success! Your inquiry was sent to the listing owner. Have a great day!");
                            }
                            else {
                                alert("Oops! there was a problem: " + data.model.message);
                            }
                        }
                    });
                }
                catch (e) {
                    alert("Oops. We cannot process your request at this time. Please send an email to team@rentpad.me and we will help you with this issue: " + e)
                }
            }
        </script>
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: avant, Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            <div style="width: 100%; text-align: left; font-family: avant, Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1020px; margin-top: 10px; margin: 0 auto;">

                    <br>
                    <br>
                    <br>
                    <span style="font-size: 27px; font-weight: bold; color: #555">&nbsp;&nbsp;Last step, here are your order details:</span> 
                    <hr>

                    <div style="padding: 10px; text-align: center;">
                        <table style="margin: 0 auto; font-size: 15px; color: #333; border-collapse: collapse;" cellpadding="5" cellspacing="5">
                            <tr>
                                <td colspan="2" style="font-size: 16px; vertical-align: middle; background-color: #fff;">

                                </td>
                            </tr>
                            <tr>

                                <td align="left" style="width:450px; vertical-align: top;">
                                    <img src="${model.props.appPath}/img/hand.jpg" style="width: 440px; position: relative; top: -3px;" />

                                </td>

                                <td style="vertical-align: top; background-color: #f7f7f7;  text-align: left;" >
                                    <br>
                                    <div style="font-size: 15px; width: 95%; margin-left: 2%;">
                                        Your property "<a href="${model.props.appPath}/listing.htm?a=2&id=${model.listing.id}" target="_blank" style="text-decoration: none; color: #369">${model.listing.title}</a>" will be featured on:
                                        <ul>
                                            <li style="padding: 3px">Search results of <b>${model.city}</b></li>
                                            <li style="padding: 3px">Under category- <b>${model.term} rentals</b>.</li>
                                            <li style="padding: 3px">From <b>${model.displayStartDate}</b> to <b>${model.displayEndDate}</b>.</li>
                                        </ul>  
                                    </div>
                                    <br>
                                    <table cellpadding="8" cellspacing="8" border="1" style=" text-align: left; border-collapse: collapse; width: 400px; padding: 5px; margin-left: 5%; font-size: 15px;">
                                        <tr>
                                            <td colspan="2">Payment Details:</td>
                                        </tr>
                                        
                                        <c:if test="${model.duration == 1}">
                                            <tr>
                                                <td>Featured property for one week</td>
                                                <td>Php 97</td>
                                            </tr>
                                            <tr>
                                                <td>Set up charge</td>
                                                <td>Php 0</td>
                                            </tr>
                                            <tr>
                                                <td>Total Payment</td>
                                                <td>Php 97</td>
                                            </tr>
                                        </c:if>
                                        <c:if test="${model.duration == 2}">
                                            <tr>
                                                <td>Featured property for one week</td>
                                                <td>Php 194</td>
                                            </tr>
                                            <tr>
                                                <td>Set up charge</td>
                                                <td>Php 0</td>
                                            </tr>
                                            <tr>
                                                <td>Total Payment</td>
                                                <td>Php 194</td>
                                            </tr>
                                        </c:if>
                                        <c:if test="${model.duration == 3}">
                                            <tr>
                                                <td>Featured property for one week</td>
                                                <td>Php 291</td>
                                            </tr>
                                            <tr>
                                                <td>Set up charge</td>
                                                <td>Php 0</td>
                                            </tr>
                                            <tr>
                                                <td>Total Payment</td>
                                                <td>Php 291</td>
                                            </tr>
                                        </c:if>
                                        <c:if test="${model.duration == 4}">
                                            <tr>
                                                <td>Featured property for one week</td>
                                                <td>Php 388</td>
                                            </tr>
                                            <tr>
                                                <td>Set up charge</td>
                                                <td>Php 0</td>
                                            </tr>
                                            <tr>
                                                <td>Total Payment</td>
                                                <td>Php 388</td>
                                            </tr>
                                        </c:if>
                                    </table>

                                    <br>

                                    <ul>
                                        <li style="padding: 3px;">
                                            Secure Option 1: Pay using your PayPal account
                                        </li>
                                        <li style="padding: 3px;">
                                            Secure Option 2: Pay using your <u>credit card</u> via PayPal&nbsp;&nbsp;&nbsp;&nbsp;
                                        </li>
                                    </ul>

                                    <br>
                                    
                                    <c:if test="${model.duration == 1}">
                                        <!-- 1W -->
                                        <form id="form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                            <input type="hidden" name="cmd" value="_s-xclick">
                                            <input type="hidden" name="hosted_button_id" value="NQ8AQXHMJ32SW">
                                            <input type="hidden" name="custom" value="${model.transactionID}">
                                            <input type="image" src="${model.props.appPath}/img/paypal-button-1.jpg" style="margin-left: 12%; height: 150px;" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                                            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                                        </form>
                                    </c:if>
                                    
                                    <c:if test="${model.duration == 2}">
                                        <!-- 2W -->
                                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                            <input type="hidden" name="cmd" value="_s-xclick">
                                            <input type="hidden" name="hosted_button_id" value="RY8EXABUMUTK8">
                                            <input type="hidden" name="custom" value="${model.transactionID}">
                                            <input type="image" src="${model.props.appPath}/img/paypal-button-1.jpg" style="margin-left: 12%; height: 150px;" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                                            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                                        </form>
                                    </c:if>
                                    
                                    <c:if test="${model.duration == 3}">
                                        <!-- 3W -->
                                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                            <input type="hidden" name="cmd" value="_s-xclick">
                                            <input type="hidden" name="hosted_button_id" value="PA3BBE5QH242Q">
                                            <input type="hidden" name="custom" value="${model.transactionID}">
                                            <input type="image" src="${model.props.appPath}/img/paypal-button-1.jpg" style="margin-left: 12%; height: 150px;" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                                            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                                        </form>
                                    </c:if>
                                    
                                    <c:if test="${model.duration == 4}">
                                        <!-- 4W -->
                                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                            <input type="hidden" name="cmd" value="_s-xclick">
                                            <input type="hidden" name="hosted_button_id" value="7U5K4S5ECL9X8">
                                            <input type="hidden" name="custom" value="${model.transactionID}">
                                            <input type="image" src="${model.props.appPath}/img/paypal-button-1.jpg" style="margin-left: 12%; height: 150px;" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                                            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                                        </form>
                                    </c:if>
                                                                            
                                    <br>                                    
                                    <br>
                                    
                                    <div style="padding: 20px;">
                                        Note: If you need help or would like to pay via bank deposit instead, drop us an email via <span style="color: #369;">team@rentpad.me</span> and we will give you the instructions on how to do that.
                                    </div>
                                    
                                    <br>
                                    <br>         
                                    
                                </td>
                            </tr>
                        </table>
                    </div>

                </div>
            </div>

            <%@include file="footer.jsp" %>

        </div>

    </body>

</html>
